<!-- 使用VUE3实现简单颜色盘，吸管组件 -->
<template>
  <div class="colorWrapper">
    <input
      type="color"
      :value="defaultValue"
      @input="updateColor"
      class="color"
      v-if="showInput" />
  </div>
</template>

<script setup lang="ts" name="Dropper">
  import { useEyeDropper } from "@vueuse/core";
  const { sRGBHex } = useEyeDropper();
  // 引入 Vue 相关的 API
  import { ref, watch } from "vue";

  // 定义组件的 props 和 emits
  const props = defineProps(["modelValue"]);
  const emit = defineEmits(["update:modelValue"]);
  //默认颜色显示
  let defaultValue = "#4EAF31"; //默认展示的颜色，使用ref无法触发初始化显示
  let showInput = ref(true); //因为defaultValue不是ref所以需要手动刷新dom
  let Value = ref(""); //派发的颜色

  //获取颜色盘的颜色
  const getColor = (newValue: string) => {
    showInput.value = false;
    defaultValue = newValue;
    Value.value = newValue;
    showInput.value = true;
  };

  //监听接受的值然后进行复制
  watch(
    () => props.modelValue,
    async newValue => {
      if (newValue) {
        getColor(newValue);
      }
    },
    { immediate: true }
  );

  //监听滴管颜色
  watch(sRGBHex, async newmodelValue => {
    if (newmodelValue) {
      getColor(newmodelValue);
    }
  });

  //监听值的变化
  watch(Value, async newValue => {
    if (newValue) {
      emit("update:modelValue", newValue);
    }
  });

  //获取颜色盘的颜色
  const updateColor = (e: any) => {
    Value.value = e.target?.value;
  };

  //处理打开滴管时候按Esc按钮报错
  //   const handleOpen = () => {
  //     try {
  //       open();
  //     } catch (error) {
  //       console.error("Error while opening EyeDropper:", error);
  //     }
  //   };
</script>

<style scoped lang="scss">
  .colorWrapper {
    input {
      cursor: pointer;
      border-radius: 5px;
      padding: 0px;
      margin: 0px;
    }
  }
</style>
